<template>
  <div class="chart-details">
    <el-button type="text" :icon="ArrowLeft" @click="backView">
      返回上级
    </el-button>
    <el-card class="box-card">
      <template #header>
        <el-tag effect="Light" style="margin-right: 12px">
          医院名:{{ hospitalName }}
        </el-tag>
        <el-tag effect="Light" type="success" style="margin-right: 12px">
          查看项目:{{ headerTitle }}
        </el-tag>
        <el-tag effect="Light" type="danger" style="margin-right: 12px">
          总数:{{ pager.totalRecords }}
        </el-tag>
      </template>
      <div class="chart-content">
        <div class="statictis-record">
          <el-table
            size="default"
            border
            stripe
            :data="statictisRecords"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <XMTableColumn type="index" width="50" />
            <XMTableColumn
              prop="patientNumber"
              label="患者编号"
            ></XMTableColumn>
            <XMTableColumn prop="patientName" label="患者名字"></XMTableColumn>
            <XMTableColumn prop="birthday" label="出生日期"></XMTableColumn>
            <XMTableColumn
              v-if="isCreateTime"
              prop="createTime"
              label="病历创建时间"
            ></XMTableColumn>
            <XMTableColumn
              v-if="isTreatmentTypeName"
              prop="treatmentTypeName"
              label="接诊类型"
            ></XMTableColumn>
            <XMTableColumn label="操作" min-width="160">
              <template #default="scope">
                <el-button
                  size="small"
                  type="primary"
                  @click="openPatientInfo(scope.row)"
                >
                  查看详情
                </el-button>
              </template>
            </XMTableColumn>
          </el-table>
          <el-pagination
            background
            class="pagination"
            layout="prev, pager, next"
            :total="pager.totalRecords"
            v-model:current-page="pager.pageIndex"
            :page-size="pager.pageSize"
            @current-change="goPage"
          ></el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
  import { ref, toRefs } from 'vue'
  import { onMountedOrActivated } from '@/hooks/core/onMountedOrActivated'
  import { useChartDetails } from '../hooks/useChartDetails'
  import { useRoute, useRouter } from 'vue-router'
  import { ArrowLeft } from '@element-plus/icons-vue'
  import { computed } from '@vue/reactivity'
  import { useStore } from 'vuex'
  import { useRouters } from '@/hooks/core/useRouters'
  interface RouteType {
    name?: string
    startDay?: String
    endDay?: String
    doctorId?: string
    diagnosis?: string
    triggers?: string
    level?: string
  }
  const headerTitle = ref('')
  const statictisRecords = ref([])
  const pager = ref({
    pageIndex: 1,
    totalRecords: 0,
    pageSize: 20,
    pagingResource: '',
  })
  const { checkApi } = useChartDetails()
  const route = useRoute()
  const router = useRouter()

  onMountedOrActivated(() => {
    loadData()
  })
  function backView() {
    router.go(-1)
  }
  async function loadData() {
    const {
      name = '',
      startDay = '',
      endDay = '',
      doctorId = '',
      diagnosis = '',
      triggers = '',
      level = '',
    } = route.query as RouteType
    const { pageIndex, pageSize } = pager.value
    headerTitle.value = decodeURIComponent(name)
    const res = await checkApi(headerTitle.value, {
      startDay,
      endDay,
      pageIndex,
      pageSize,
      doctorId,
      diagnosis,
      triggers,
      level,
    })
    console.log('test =' + JSON.stringify(res))
    // 返回值这里不用any 该怎么处理
    const { data, total } = res as any
    statictisRecords.value = data
    pager.value.totalRecords = total
    checkHeaderExtends(data)
  }

  const isCreateTime = ref(false)
  const isTreatmentTypeName = ref(false)
  function checkHeaderExtends(data: any) {
    isCreateTime.value = false
    isTreatmentTypeName.value = false
    if (Array.isArray(data) && data.length > 0) {
      const { createTime, treatmentTypeName } = data[0]
      isCreateTime.value = createTime ? true : false
      isTreatmentTypeName.value = treatmentTypeName ? true : false
    }
    // 累计提交病历数/累计未提交病历数/累计病历总数/诊断统计/累计停药人数列表 createTime treatmentTypeName
  }
  function goPage() {
    loadData()
  }
  const store = useStore()
  const hospitalName = computed(() => {
    return store.getters.userInfo.orgName
  })

  const { openNewWindow } = useRouters()
  function openPatientInfo(row: any) {
    console.log('row = ' + JSON.stringify(row))
    console.log('headerTitle.value = ' + headerTitle.value)
    const b = !!['红区打卡', '黄区打卡', '绿区打卡'].find(
      (name) => name === headerTitle.value
    )
    if (b) {
      openNewWindow('/workbench/patientInfo', {
        id: row.patientNumber,
        anchorType: 'markCard',
      })
    } else {
      openNewWindow('/workbench/patientInfo', { id: row.patientNumber })
    }
  }
</script>
<style lang="scss" scoped>
  .chart-details {
    padding: 12px 32px;
    .backTitle {
      color: #409eff;
    }
    .title-styles {
      padding: 0px 12px;
      height: 50px;
      line-height: 50px;
      background-color: rgba(249, 249, 249, 1);
      border: rgba(233, 233, 233, 1) 1px solid;
      border-bottom: 0px;
      font-size: 13px;

      span {
        color: #333333;
        margin-right: 22px;
        span {
          color: #909399;
        }
      }
    }
    .chart-content {
      .statictis-record {
        display: flex;
        flex-direction: column;
        align-items: center;
        .el-pagination {
          margin-top: 22px;
        }
      }
    }
  }
</style>
